﻿
<ul class="nav nav-pills ul">
    <li class="active text-center" col style="width: 33%"><a>所有课程</a></li>
    <li class="text-center" col style="width: 33%"><a>未开课课程</a></li>
    <li class="text-center" col style="width: 33%"><a>已开课课程</a></li>
</ul>
<br>
<table class="table table-striped table-bordered table-hover">
    <tr>
        <th col style="width: 10%">课程号</th>
        <th col style="width: 10%">老师编号</th>
        <th col style="width: 10%">任课老师</th>
        <th col style="width: 30%">课程名</th>
        <th col style="width: 10%">课程学分</th>
        <th col style="width: 10%">总课时</th>
        <th col style="width: 10%">修改课程</th>
        <th col style="width: 10%">删除课程</th>
    </tr>
    <tr>
        <td><a href="#">123456789</a></td>
        <td>123456789</td>
        <td>王多余</td>
        <td>计算机网络数据结构软件项目管理</td>
        <td>3分</td>
        <td>30课时</td>
        <td><a href="#">修改</a></td>
        <td><a href="#">删除</a></td>
    </tr>
</table>
<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">首页</a></li>
    <li>第<span>1</span>页</li>
    <li><a href="#">尾页</a></li>
    <li><a href="#">下一页</a></li>
    <span>共<span>6</span>页</span>
</ul>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button class="close" data-dismiss="modal"> &times;</button>
                                    <h4 class="text-danger">出错啦！</h4>
                                </div>
                                <div class="modal-body">
                                    <h5>数据请求失败！</h5>
                                </div>
                                <div class="modal-footer">
                                    <a class="btn btn-primary" data-dismiss="modal">确认</a>
                                </div>
                            </div>
                        </div>
                    </div>
<script>
    // 前后端结合
    $(document).ready(function () {
        $('.pager li').eq(0).addClass('disabled')
        $('.pager li').eq(1).addClass('disabled')
        var obj = {
            pageNum: 1,
            pageSize: 10,
            identify: 1,
            type: 1,
        }
        $.ajax({
            type: 'GET',
            url: '/sel-courselist',
            data: obj,
            success: function (data) {
                if (data.status == 1) {
                    $('.pager span>span').eq(0).text(data.totalPageNum)
                    var html = `<tr>
                                    <th col style="width: 10%">课程号</th>
                                    <th col style="width: 10%">老师编号</th>
                                    <th col style="width: 10%">任课老师</th>
                                    <th col style="width: 30%">课程名</th>
                                    <th col style="width: 10%">课程学分</th>
                                    <th col style="width: 10%">总课时</th>
                                    <th col style="width: 15%">获取学生列表</th>
                                </tr>`
                    for (var i = 0; i < data.page.courseList.length; i++) {
                        html = html + `<tr>
                                            <td>`+data.page.courseList[i].cno+`</a></td>
                                            <td>`+data.page.courseList[i].tno+`</td>
                                            <td>`+data.page.courseList[i].tname+`</td>
                                            <td>`+data.page.courseList[i].cname+`</td>
                                            <td>`+data.page.courseList[i].credit+`</td>
                                            <td>`+data.page.courseList[i].chour+`</td>
                                            <td><a href="#">获取</a></td>
                                        </tr>`
                    }
                    $('table').html(' ')
                    $('table').html(html)
                }else if (data.status == 0) {
                    $('#myModal').modal()
                }
            },
            error: function (data) {
                $('#myModal').modal()
            }
        })
    })
    //所有课程部分

    // 未开课程事件
    $('.pager li').click(function () {
        var a = $('.pager li>span').text()
        var _this = this
        var index = $('.pager li').index(this)
        a = Number(a)
        var obj = {
            pageNum: a,
            pageSize: 10,
            identify: 0,
            type: -1,
        }
        $.ajax({
            type: 'GET',
            url: '/sel-courselist',
            data: obj,
            success: function (data) {
                if (data.status == 1) {
                    if (index == 0) {
                        if (a <= 1) {
                            $('.pager li').eq(0).addClass('disabled')
                            $('.pager li').eq(1).addClass('disabled')
                        }else if (a > 1){
                            num = a - 1
                            $('.pager li>span').text(num)
                            $('.pager li').eq(3).removeClass('disabled')
                            $('.pager li').eq(4).removeClass('disabled')
                            var html = `<tr>
                                            <th col style="width: 10%">课程号</th>
                                            <th col style="width: 10%">老师编号</th>
                                            <th col style="width: 10%">任课老师</th>
                                            <th col style="width: 30%">课程名</th>
                                            <th col style="width: 10%">课程学分</th>
                                            <th col style="width: 10%">总课时</th>
                                            <th col style="width: 15%">获取学生列表</th>
                                        </tr>`
                            for (var i = 0; i < 10; i++) {
                                html = html + `<tr>
                                                    <td><a href="#">123456789</a></td>
                                                    <td>123456789</td>
                                                    <td>王多余</td>
                                                    <td>计算机网络数据结构软件项目管理</td>
                                                    <td>3分</td>
                                                    <td>30课时</td>
                                                    <td><a href="#">获取</a></td>
                                                </tr>`
                            }
                            $('table').html(' ')
                            $('table').html(html)
                        }
                    }else if (index == 1) {
                        $('.pager li').eq(0).addClass('disabled')
                        $('.pager li>span').text(1)
                        $('.pager li').eq(1).addClass('disabled')
                        $('.pager li').eq(3).removeClass('disabled')
                        $('.pager li').eq(4).removeClass('disabled')
                        var html = `<tr>
                                        <th col style="width: 10%">课程号</th>
                                        <th col style="width: 10%">老师编号</th>
                                        <th col style="width: 10%">任课老师</th>
                                        <th col style="width: 30%">课程名</th>
                                        <th col style="width: 10%">课程学分</th>
                                        <th col style="width: 10%">总课时</th>
                                        <th col style="width: 15%">获取学生列表</th>
                                    </tr>`
                        for (var i = 0; i < 10; i++) {
                            html = html + `<tr>
                                                <td><a href="#">123456789</a></td>
                                                <td>123456789</td>
                                                <td>王多余</td>
                                                <td>计算机网络数据结构软件项目管理</td>
                                                <td>3分</td>
                                                <td>30课时</td>
                                                <td><a href="#">获取</a></td>
                                            </tr>`
                        }
                        $('table').html(' ')
                        $('table').html(html)
                    }else if (index == 3) {
                        $('.pager li>span').text(data.totalPageNum)
                        $('.pager li').eq(0).removeClass('disabled')
                        $('.pager li').eq(1).removeClass('disabled')
                        $('.pager li').eq(3).addClass('disabled')
                        $('.pager li').eq(4).addClass('disabled')
                        var html = `<tr>
                                        <th col style="width: 10%">课程号</th>
                                        <th col style="width: 10%">老师编号</th>
                                        <th col style="width: 10%">任课老师</th>
                                        <th col style="width: 30%">课程名</th>
                                        <th col style="width: 10%">课程学分</th>
                                        <th col style="width: 10%">总课时</th>
                                        <th col style="width: 15%">获取学生列表</th>
                                    </tr>`
                        for (var i = 0; i < 10; i++) {
                            html = html + `<tr>
                                                <td><a href="#">123456789</a></td>
                                                <td>123456789</td>
                                                <td>王多二</td>
                                                <td>计算机网络数据结构软件项目管理</td>
                                                <td>3分</td>
                                                <td>30课时</td>
                                                <td><a href="#">获取</a></td>
                                            </tr>`
                        }
                        $('table').html(' ')
                        $('table').html(html)
                    }else if (index == 4) {
                        if (a >= data.totalPageNum) {
                            $('.pager li').eq(3).addClass('disabled')
                            $('.pager li').eq(4).addClass('disabled')
                        }else if (a < data.totalPageNum){
                            num = a + 1
                            $('.pager li>span').text(num)
                            $('.pager li').eq(0).removeClass('disabled')
                            $('.pager li').eq(1).removeClass('disabled')
                            var html = `<tr>
                                            <th col style="width: 10%">课程号</th>
                                            <th col style="width: 10%">老师编号</th>
                                            <th col style="width: 10%">任课老师</th>
                                            <th col style="width: 30%">课程名</th>
                                            <th col style="width: 10%">课程学分</th>
                                            <th col style="width: 10%">总课时</th>
                                            <th col style="width: 15%">获取学生列表</th>
                                        </tr>`
                            for (var i = 0; i < 10; i++) {
                                html = html + `<tr>
                                                    <td><a href="#">123456789</a></td>
                                                    <td>123456789</td>
                                                    <td>王多二</td>
                                                    <td>计算机网络数据结构软件项目管理</td>
                                                    <td>3分</td>
                                                    <td>30课时</td>
                                                    <td><a href="#">获取</a></td>
                                                </tr>`
                            }
                            $('table').html(' ')
                            $('table').html(html)
                        }
                    }
                } else {

                }
            },
            error: function (data) {
                console.log(data);
                $('#myModal').modal()
            }
        })
    })
    //未开课程部分

    //已开课程部分
    $('.nav-pills li').click(function () {
        var _this = this
        if ($('.ul li')[0] == _this) {
            $($('.ul li')[0]).addClass('active')
            $($('.ul li')[1]).removeClass('active')
            $($('.ul li')[2]).removeClass('active')
        } else if ($('.ul li')[1] == _this) {
            $($('.ul li')[1]).addClass('active')
            $($('.ul li')[0]).removeClass('active')
            $($('.ul li')[2]).removeClass('active')
        }else if ($('.ul li')[2] == _this) {
            $($('.ul li')[2]).addClass('active')
            $($('.ul li')[0]).removeClass('active')
            $($('.ul li')[1]).removeClass('active')
        }
    })
</script>
